<template>
  <div class="lists-container">
    <div class="order-wrapper"
         v-if="listsData.length>0">
      <div class="order-box"
           v-for="(listsItem,index) in listsData"
           :key="index">
        <section class="order-list-info try-list-info clearfix">
          <a href>
            <span class="fl">
              <p>{{listsItem.title}}</p>
              <p v-if="listsItem.status_name!='待审核' && listsItem.status_name!='已拒绝'">{{listsItem.order_no}}</p>
            </span>
            <span class="status fr">{{listsItem.status_name}}</span>
          </a>
        </section>
        <section class="order-goods">
          <ul>
            <li class="goods-li"
                v-for="(goods,idx) in listsItem.order"
                :key="idx">
              <section class="order-goods-img">
                <!-- TODO 跳转修改 -->
                <a  @click="jumpTo(goods.item_id)">
                  <img :src="goods.pic_url+'160x160'"
                       width="80"
                       height="80"
                       v-if="goods.is_compress" />
                  <img :src="goods.pic_url"
                       width="80"
                       height="80"
                       v-else />
                </a>
              </section>
              <section class="order-goods-infor g-flex">
                <div class="left">
                  <!-- TODO 跳转修改 -->
                  <a class="goods-title" @click="jumpTo(goods.item_id)">{{goods.title}}</a>
                  <p class="goods-props" v-if="goods.props">{{goods.props}}</p>
                  <p class="price fl" v-if="listsItem.pay_type && listsItem.pay_type==5">&dollar; <em>{{goods.current_price}}</em>}</p>
                  <span class="price" v-else v-html="scaleGoodsPriceFn(goods.current_price)"></span>
                </div>
                <!-- <div class="right">
                  <span class="num fr"><i>x</i>{{goods.num}}</span>
                </div> -->
              </section>
            </li>
          </ul>
        </section>

        <section class="order-pay">
          <div class="good-price-box">
            <span>
              运费：<span class="good-total-price fontGilroy"><i>&yen;</i><em>{{listsItem.post_fee}}</em></span>
            </span>
          </div>
          <div class="good-more-btn">
            <van-button round hairline href="javascript:;"
               class="btn orange-btn"
               v-if="listsItem.status==2"
               @click="clickConfirmOrder(listsItem.id)">确认收货</van-button>
            <van-button round hairline href="javascript:;"
               class="btn orange-btn"
               v-else-if="listsItem.status==0 && listsItem.a_status==1"
               @click="clickPay(listsItem.id,listsItem.post_fee)">支付运费</van-button>
            <span v-else-if="listsItem.status==3">
              <van-button round hairline href="javascript:;"
                 class="btn white-btn"
                 v-if="listsItem.is_comment==1">已评价</van-button>
              <van-button round hairline href="javascript:;"
                 class="btn white-btn"
                 @click="Jump('tryComment',listsItem.id)"
                 v-else>试用报告</van-button>
            </span>
            <van-button round hairline class="btn orange-btn"
               @click="Jump('tryListDetail',listsItem.id)">详情</van-button>
          </div>
        </section>
      </div>
    </div>
    <div v-else>
      <no-data :noData=noData></no-data>
    </div>
    <!-- 密码弹框 -->
    <pay-password :showPwd="showPwd"
                  @closePwd="closePwd"
                  @payPwdCallback="payPwdCallback"></pay-password>
    <!-- 付款弹窗 -->
    <!-- 付款弹窗 -->
    <van-popup v-model="showPayPop"
               class="pay-box"
               position="top"
               :style="{ height: '100%' }">
      <!-- <tx-pop @closePop="closeCashPop" :dzData="dzData" :cashPopData="cashPopData"></tx-pop> -->
      <more-payment @closePayPop="closePayPop"
                    @payCallback="payCallback"
                    :payPopData="payPopData"
                    :isHdfkPay="false"
                    :isTlfzPay="false"
                    :isPeerPay="true"
                    :isXxPay="false"></more-payment>
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue'
import { Dialog } from 'vant'
import noData from '@/components/noData/index'
import PayPassword from '@/components/PayPassword/index'
import MorePayment from '@/components/MorePayment/index'
import { scaleGoodsPrice } from '@/utils/index.js'
import { openPage } from '@/utils/utils.js'
import { getTryList, tryOrderConfirm, buyAgain } from '@/api/user/member/memberApi'
import smllpay from '@/smallapp/smallpay'

export default Vue.extend({
  name: 'index',
  components: {
    noData,
    PayPassword,
    MorePayment
  },
  data() {
    return {
      noData: {
        img: 'https://img.wifenxiao.com/h5-wfx/images/no_order.png',
        text: '暂无试用活动数据',
        marginTop: '60px',
        width: '214px',
        txtMarginTop: '-46px'
      },
      loading: false,
      finished: false,
      error: false,
      listParams: {
        p: 1,
        type: 1 // 1全部 、2 待付款订单、3已确认 、4退换货 、5 可以评论订单、6待确认、 7 已完成
      },
      orderId: '',
      showPayPop: false,
      payPopData: {},
      listsData: [],
      is_hantePay: '',
      default_pay_type: '', // 默认支付方式
      popup_show: '',
      showPwd: false, // 支付密码弹框是否显示
      submitData: {}
    }
  },
  methods: {
    // TODO 小程序跳转修改
    jumpTo(detailId) {
        window.open('/item-detail?detailId=' + detailId)
    },
    scaleGoodsPriceFn(price) {
      return scaleGoodsPrice(price)
    },
    init() {
      this.finished = false
      this.listParams.p = 1
      this.listsData = []
      this.$loadingWrap.show()
      getTryList(this.listParams).then((res) => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.listsData = res.data.lists
          // 付款弹窗信息
          this.payPopData.balance = res.data.balance
          this.payPopData.default_pay_type = res.data.default_pay_type // 默认付款方式
          this.payPopData.default_pay = res.data.default_pay // hantePay默认付款方式
          this.default_pay_type = res.data.default_pay_type
          this.is_hantePay = res.data.is_hantePay
          this.popup_show = res.data.popup_show
          if (!this.listsData.length) {
            this.finished = true
          }
          this.listParams.p++
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 加载更多
    onLoad() {
      if (this.finished) return false
      getTryList(this.listParams).then((res) => {
        this.loading = false
        if (res.data.length) {
          this.listsData.push(...res.data)
          this.listParams.p++
        } else {
          this.finished = true
        }
      }).catch(() => {
        this.error = true
      })
    },
    // 确认收货
    clickConfirmOrder(id) {
      const params = {
        id: id
      }
      Dialog.confirm({
        message: '确认收货？',
        className: 'common-confirm',
        closeOnClickOverlay: true
      }).then(() => {
        this.$loadingWrap.show()
        tryOrderConfirm(params).then((res) => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.$Error('操作成功')
            setTimeout(() => {
              // TODO 小程序处理
                this.init()
            }, 1000)
          } else {
            this.$Error('操作失败')
          }
        })
        // on confirm
      }).catch(() => {
        // on cancel
      })
    },
    // 点击付款
    clickPay(id, post_fee) {
      /* if (this.is_alipay == '0' && this.is_wx_pay == '0' && this.is_bank == '0' && this.is_hantePay == '0') {
        this.$Error('抱歉，暂时不能付款！')
        return false
      } */
      this.payPopData.order_id = id
      this.payPopData.payment = post_fee
      this.showPayPop = true
    },
    // 关闭支付弹框
    closePayPop() {
      this.showPayPop = false
    },
    // 输入支付密码点击确定
    payPwdCallback() {
      this.buyAgainFun(this.submitData)
    },
    // 关闭输入支付密码弹窗
    closePwd() {
      this.showPwd = false
    },
    // 点击确定付款，付款请求
    payCallback(submitData) {
      this.submitData = submitData
      const money_type = submitData.moneyType
      if (money_type == 2 && this.popup_show) {
        this.showPwd = true
      } else {
        this.buyAgainFun(submitData)
      }
    },
    Jump(path, id) {
      this.$JumpPath(this, path, { id: id })
    },
    // 付款方法请求
    buyAgainFun(submitData) {
      // console.log('submitData', submitData)
      const data = {
        hantepay: submitData.hantepay, // hantepay定制
        global_alipay_currency: submitData.global_alipay_currency, // 国际支付宝货币方式
        pay_type: submitData.type ? submitData.type : '', // 支付方式
        order_id: submitData.order_id, // 付款订单id
        money_type: submitData.moneyType, // 是否余额支付
        total_fee: submitData.payment
      }
      buyAgain(data).then((res) => {
        if (res.status == 1) {
          if (res.data && res.data.jsApiParameters) {
            smllpay.wxOrderPay(res.data.jsApiParameters)
          } else if (res.data && res.data.url) {
            openPage(res.data.url)
          }
        } else {
          this.$Error(data.msg)
        }
      })
    }
  },
  created() {
    this.init()
    this.$Bus.$on('statusEvent', (option) => {
      this.listParams.type = option.status
      this.init()
    })
  },
  beforeDestroy() {
    this.$Bus.$off('statusEvent')
  }
})
</script>

<style lang="scss">
@import "src/styles/order/lists";
.lists-container {
  .order-box{
    .try-list-info{
      .status{
        height:auto;
        line-height:initial;
      }
    }
  }
}
</style>